<script lang="ts" setup>
import { useI18n } from 'vue-i18n'

const { t } = useI18n()

interface Props {
	editForm: any
}

const props = defineProps<Props>()
</script>

<template>
	<div class="bg-white rounded-lg shadow-sm p-6">
		<a-divider class="text-lg font-semibold mb-6">{{ t('商品详细.销售信息') }}</a-divider>
		<div class="salesInfoOperate">
			<a-form
				ref="salesInfoFormRef"
				name="salesInfo"
				:model="editForm.salesInfo"
				:label-col="{ span: 4 }"
				:wrapper-col="{ span: 16 }">
				<a-form-item
					:label="t('商品详细.sort')"
					name="sort"
					:rules="[
						{
							required: true,
							message: t('商品详细.请输入排序值！')
						}
					]"
					:wrapper-col="{ span: 8 }">
					<a-input-number
						v-model:value="editForm.salesInfo.sort"
						:placeholder="t('商品详细.请输入排序值')"
						:min="0"
						:max="999999"></a-input-number>
				</a-form-item>
				<a-form-item
					:label="t('商品详细.上架状态')"
					name="isPutOnSale"
					:wrapper-col="{ span: 4 }">
					<a-switch v-model:checked="editForm.salesInfo.isPutOnSale"></a-switch>
				</a-form-item>
				<a-form-item
					v-if="editForm.salesInfo.isPutOnSale"
					:label="t('商品详细.销售时间')"
					name="putOnSaleRange"
					:wrapper-col="{ span: 8 }">
					<a-range-picker
						v-model:value="editForm.salesInfo.putOnSaleRange"
						:show-time="{ format: 'HH:mm' }"
						format="YYYY-MM-DD HH:mm"
						:placeholder="[
							t('商品详细.开始时间'),
							t('商品详细.结束时间')
						]"></a-range-picker>
				</a-form-item>
				<a-form-item
					:label="t('商品详细.自动上架')"
					name="isAutoPutOnSale"
					:wrapper-col="{ span: 4 }">
					<a-switch v-model:checked="editForm.salesInfo.isAutoPutOnSale"></a-switch>
				</a-form-item>
				<a-form-item
					:label="t('商品详细.自动下架')"
					name="isAutoPutOffSale"
					:wrapper-col="{ span: 4 }">
					<a-switch v-model:checked="editForm.salesInfo.isAutoPutOffSale"></a-switch>
				</a-form-item>
			</a-form>
		</div>
	</div>
</template>

<style lang="scss" scoped></style>
